<template>
    <div id="myMain">
        <div class="content displayFlexR">
            <el-form :inline="true" label-width="150px" :model="formData" class="demo-form-inline" style="width: 100%;
    display: flex;">
            <div class="myMain-left">
                    <div class="title baseBG">基本信息</div>
                    <div class="line baseBG"></div>
                    <el-row>
                        <el-col :span="24">
                            <vxe-button @click="openModal">选择房屋</vxe-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="房屋编号：">
                                <el-input v-model="formData.houseNumber" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="区域：">
                                <el-input v-model="formData.region" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="楼栋：">
                                <el-input v-model="formData.bname" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="楼层：">
                                <el-input v-model="formData.high" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="单元号：">
                                <el-input v-model="formData.unit" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="面积：">
                                <el-input v-model="formData.area" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="朝向：">
                                <el-input v-model="formData.aspect" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="装修情况：">
                                <el-input v-model="formData.decorateType" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="是否有电梯：">
                                <el-input v-model="formData.elevator" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                        <el-row>
                        <el-col :span="12">
                            <el-form-item label="单价/月：">
                                <el-input v-model="formData.rentType" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="总额/年：">
                                <el-input v-model="formData.Mprice" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="title baseBG">企业信息</div>
                    <div class="line baseBG"></div>
                        <el-row>
                        <el-col :span="12">
                            <el-form-item label="企业名称：">
                                <el-input v-model="formData.fname"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="发起日期：">
                                <el-input v-model="formData.time" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                        <el-row>
                        <el-col :span="12">
                            <el-form-item label="企业法人：">
                                <el-input v-model="formData.corp"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="身份证：">
                                <el-input v-model="formData.nid"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="联系方式：">
                                <el-input v-model="formData.phone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="纳税人识别号：">
                                <el-input v-model="formData.alias"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="企业类型：">
                                <el-input v-model="formData.type"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="企业规模：">
                                <el-input v-model="formData.scale"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="租赁时长：">
                                <el-input v-model="formData.leaseTime"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="营业执照：">
                                <el-upload
                                class="upload-demo"
                                action="http://192.168.1.193:9307/api-user/open/uploadFile"
                                multiple
                                :limit="1"
                                :on-exceed="handleExceed"
                                :before-upload="beforeAvatarUpload"
                                :on-success="handleAvatarSuccess2"
                                :file-list="fileList2">
                                <el-button size="small" type="primary">上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传doc/docx文件</div>
                                </el-upload>
                                <a :href="formData.charter" download="myFileName">
                                    <vxe-button><i class="vxe-icon--download"></i>  压缩包</vxe-button>
                                </a>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="三证合一：">
                                <el-upload
                                class="upload-demo"
                                action="http://192.168.1.193:9307/api-user/open/uploadFile"
                                multiple
                                :limit="1"
                                :on-exceed="handleExceed"
                                :before-upload="beforeAvatarUpload"
                                :on-success="handleAvatarSuccess"
                                :file-list="fileList1">
                                <el-button size="small" type="primary">上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传doc/docx文件</div>
                                </el-upload>
                                <a :href="formData.card" download="myFileName2">
                                    <vxe-button><i class="vxe-icon--download"></i>  压缩包</vxe-button>
                                </a>
                            </el-form-item>
                        </el-col>
                    </el-row>
                
            </div>
            <div class="myMain-right">
                <div class="title baseBG">合同信息</div>
                <div class="line baseBG"></div>
                <div v-for="(item, index) in formData.contract" :key="index">
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="合同名称：">
                                <el-input v-model="item.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-upload
                            class="upload-demo"
                            action="http://192.168.1.193:9307/api-user/open/uploadFile"
                            multiple
                            :limit="1"
                            :on-exceed="handleExceed"
                            :before-upload="beforeAvatarUpload"
                            :on-success="handleAvatarSuccess3"
                            :file-list="item.fileList">
                            <el-button size="small" type="primary">上传</el-button>
                            </el-upload>
                            <a :href="item.contractSite" download="myFileName2">
                                <vxe-button><i class="vxe-icon--download"></i></vxe-button>
                            </a>
                        </el-col>
                        <el-col :span="2" v-if="index == 0">
                            <el-button class="el-icon-plus my_success_btn" style="padding: 10px !important;border: none;" @click="addTemplate"></el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="合同签订日期：">
                                <el-input v-model="item.time"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="租赁开始时间：">
                                <el-input v-model="item.leaseStartTime"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="租赁结束时间：">
                                <el-input v-model="item.leaseEndTime"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>
            </div>
            </el-form>
            <div class="sureBtn">
                <vxe-button class="baseBG" @click="submit">确定</vxe-button>
                <vxe-button @click="cancel">取消</vxe-button>
            </div>
        </div>
        <vxe-modal v-model="alertVal" title="房屋信息绑定" width="70%" @confirm="alertSubmit" show-footer>
            <template #default>
                <vxe-table
            :filter-config="{showIcon: false}"
            border
            stripe
            highlight-hover-row
            :data="tableData"
            :export-config="{}"
            row-id="id"
            :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
            ref="xTable"
            :radio-config="{highlight: true}"
            @radio-change="radioChangeEvent">
            <vxe-table-column type="radio" width="60">
                <template #header>
                <vxe-button type="text" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</vxe-button>
                </template>
            </vxe-table-column>
            <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
            <vxe-table-colgroup title="房源编号">
                <vxe-table-column field="houseNumber" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                    <template #header="{ column }">
                        <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                    </template>
                </vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="区域">
                <vxe-table-column field="region" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                    <template #header="{ column }">
                        <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                    </template>
                </vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-column field="lname" title="楼栋"></vxe-table-column>
            <vxe-table-column field="high" title="楼层"></vxe-table-column>
            <vxe-table-column field="unit" title="单元号"></vxe-table-column>
            <vxe-table-column field="area" title="面积"></vxe-table-column>
            <vxe-table-column field="aspect" title="朝向"></vxe-table-column>
            <vxe-table-column field="decorateType" title="装修情况">
            </vxe-table-column>
            <vxe-table-column field="elevator" title="是否有电梯">
            </vxe-table-column>
            <vxe-table-column field="rentStatus" title="房屋状态">
            </vxe-table-column>
            </vxe-table>
            <!-- 分页 -->
            <vxe-pager
            perfect
            size="mini"
            :current-page="tablePage.currentPage"
            :page-size="tablePage.pageSize"
            :page-sizes="tablePage.pageSizes"
            :total="tablePage.totalResult"
            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']">
            </vxe-pager>
            </template>
        </vxe-modal>
    </div>
</template>
<style lang="scss" scoped>
@import '../../../styles/all';
#myMain{
    .content{
        flex: 1;
        position: relative;
        .myMain-left, .myMain-right{
            background-color: white;
            padding: 20px;
            border-radius: 5px;
        }
        .myMain-left{
            flex: 2;
            margin-right: 20px;
        }
        .myMain-right{
            flex: 1;
            .el-input{
                width: 22vh;
            }
        }
        .title{
            width: 92px;
            height: 30px;
            line-height: 20px;
            text-align: center;
            font-size: 18px;
            line-height: 30px;
        }
        .line{
            width: 100%;
            height: 5px;
            margin-bottom: 20px;
        }
    }
}
</style>
<script>
import $ from 'jquery'
import { getHouseInfo } from '@/api/parkManage'
import { getHouseInfoByStatus } from '@/api/RecruitAndRelease'
import { getSettleInApprovalInfoById,getContractInfoById,putEnterpriseInfoById } from '@/api/enterprise_Manage'
export default {
    props: {
    },
    components:{},
    data(){
        return{
            textarea: '',
            checkList: [],
            formData: {
                contract:[]
            },
            rowId: this.$route.query.data.id,
            fileList1: [],
            fileList2: [],
            // 弹窗
            alertVal: false,
            tableData: [
                { id: 10001, a: '123456', b: 'A区', c: 'A栋', d: '8层', e:'805', f:'150', g:'南', h:'未装修', i:'是', j:'未入住'},
                { id: 10001, a: '123457', b: 'B区', c: 'A栋', d: '9层', e:'910', f:'145', g:'南', h:'未装修', i:'是', j:'未入住'},
            ],
            tablePage: {
                currentPage: 1,
                pageSize: 3,
                pageSizes: [3, 6, 9, 12],
                totalResult: 0
            },
            selectRow: null,
            // 旧房屋信息
            oldId: null,
        }
    },
    methods:{
        // 房屋信息
        async init2(page, limit){
            let result = []
            await getHouseInfoByStatus(page, limit,[2], 0).then(res => {
                console.log('get 房屋 res', res)
                result = JSON.parse(JSON.stringify(res.data))
                this.tablePage.totalResult = result.length
                this.tableData = result
                for(let i=0; i<this.tableData.length; i++){
                    this.changeStatus(this.tableData[i])
                }
                
            })
            
        },
        async init(){
            let result = []
            let ContractInfo = []
            await getSettleInApprovalInfoById(this.rowId).then(res => {
                console.log('企业信息修改详情', res)
                // 企业信息与旧房信息
                result = JSON.parse(JSON.stringify(res.data[0]))
                this.oldId = result.hid
                //
                this.formData = result
                let obj1 = {name: this.formData['cardName'], url: this.formData['card']}
                this.fileList1.push(obj1)
                let obj2 = {name: this.formData['charterName'], url: this.formData['charter']}
                this.fileList2.push(obj2)

                // 合同信息
                getContractInfoById(result.fid).then(res2 => {
                    console.log('企业合同信息', res2)
                    ContractInfo = JSON.parse(JSON.stringify(res2))
                    this.formData['contract'] = ContractInfo
                    for(let i=0; i<ContractInfo.length; i++){
                        this.changeStatus(ContractInfo[i])
                        this.formData['contract'][i]['fileList'] = [{name: ContractInfo[i]['name'], url: ContractInfo[i]['contractSite']}]
                    }
                    console.log("this.formData['contract']", this.formData['contract'])
                })
                
                this.formData['Mprice'] = this.formData['rentType'] * 12
            })
            
            
        },
        changeStatus(data){
            if(data['decorateType'] == 1){
                data['decorateType'] = '已装修'
            }else{
                data['decorateType'] = '未装修'
            }
            if(data['elevator'] == 1){
                data['elevator'] = '电梯房'
            }else{
                data['elevator'] = '步梯房'
            }if(data['rentStatus'] == 1){
                data['rentStatus'] = '已出租'
            }else{
                data['rentStatus'] = '未出租'
            }
        },
        // 上传
        beforeAvatarUpload(file) {
            const isDOC = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
            if (!isDOC) {
                this.$message.error('上传的图片只能是 doc 或者 docx 格式!');
            }
            return isDOC;
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        handleAvatarSuccess(res, file) {
            console.log("res", res)
            this.init()
        },
        handleAvatarSuccess2(res, file) {
            console.log("res", res)
            this.init()
        },
        handleAvatarSuccess3(res, file) {
            console.log("res", res)
            // this.formData.charter.push(res.data)
        },
        // 新增模块
        addTemplate(){
            // 未完成------------------------------------------
            let len = this.formData['contract'].length
            this.formData['contract'].push({
                id: len + 2,
                name: '',
                time: '',
                leaseStartTime: '',
                leaseEndTime: '',
                // contractSite: '',
                // fileList: [{name: '', url: ''}]
            })
            console.log(this.formData)
        },
        
        // 弹窗
        openModal(){
            this.alertVal = true
        },
        // 表内查找
        customStringFilterMethod ({ option, row, column }) {
            if (option.data) {
            return XEUtils.toValueString(row[column.property]).toLowerCase().indexOf((option.data).toLowerCase()) > -1
            }
            return true
        },
        filterEvent (option) {
            const xTable = this.$refs.xTable
            // 设置为选中状态
            option.checked = true
            // 修改条件之后，需要手动调用 updateData 处理表格数据
            xTable.updateData()
        },
        radioChangeEvent ({ row }) {
            this.selectRow = row
            console.log(this.selectRow.hid, 'hid')
        },
        clearRadioRowEevnt () {
            this.selectRow = null
            this.$refs.xTable.clearRadioRow()
        },
        alertSubmit(){
            // 合并两个对象   this.formData  企业信息   this.selectRow   新房信息
            let time = this.formData['time']
            let id = this.formData['id']
            let newHid = this.selectRow['hid']
            this.formData={...this.formData,...this.selectRow}
            this.formData['time'] = time
            this.formData['id'] = id
            this.formData['hid'] = newHid
            this.formData['oldId'] = this.oldId
            this.formData['Mprice'] = this.formData['rentType'] * 12
            this.changeStatus(this.formData)
            
        },
        submit(){
            console.log("this.formData111111", this.formData)
            putEnterpriseInfoById(this.formData).then(res => {
                console.log(res)
                this.init2(this.tablePage.currentPage, this.tablePage.pageSize)
                this.$router.go(-1)
            })
            
        },
        cancel(){
            this.$router.go(-1)
        },
    },
    created(){},
    mounted(){
        this.init()
        this.init2(this.tablePage.currentPage, this.tablePage.pageSize)
    },
}
</script>